<template>
  <el-form class="find-pass-step1" ref="form" :model="formData" :rules="rules">
    <el-form-item prop="schoolCode" v-if="clientType === 'school'">
      <el-input
        v-model="formData.schoolCode"
        :placeholder="$tInput('school.schoolCode')"
        prefix-icon="el-icon-office-building"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="companyCode" v-if="clientType === 'company'">
      <el-input
        v-model="formData.companyCode"
        :placeholder="$tInput('company.companyCode')"
        prefix-icon="el-icon-office-building"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="idCode" v-if="clientType === 'student'">
      <el-input
        v-model="formData.idCode"
        :placeholder="$tInput('student.idCode')"
        prefix-icon="el-icon-office-building"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="contactMobile" v-if="clientType === 'school'">
      <el-input
        v-model="formData.contactMobile"
        :placeholder="$tInput('field.mobile')"
        prefix-icon="el-icon-mobile-phone"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="contactMobile" v-if="clientType === 'company'">
      <el-input
        v-model="formData.contactMobile"
        :placeholder="$tInput('field.mobile')"
        prefix-icon="el-icon-mobile-phone"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="mobile" v-if="clientType === 'student'">
      <el-input
        v-model="formData.mobile"
        :placeholder="$tInput('field.mobile')"
        prefix-icon="el-icon-mobile-phone"
      >
      </el-input>
    </el-form-item>
    <el-form-item class="captcha-item">
      <el-input
        v-model="captcha"
        :placeholder="$tInput('field.captcha')"
        prefix-icon="el-icon-picture-outline"
      >
      </el-input>
      <img class="captcha-img" :src="captchaImg" alt @click="getCaptcha" />
    </el-form-item>
    <el-form-item prop="code">
      <el-input
        v-model="formData.code"
        :placeholder="$tInput('field.code')"
        prefix-icon="el-icon-chat-dot-round"
      >
        <el-button slot="append" type="primary" @click="sendSmsCode"
          >发送验证码</el-button
        >
      </el-input>
    </el-form-item>
    <el-button
      class="w-100"
      type="primary"
      round
      @click="submitForm"
      :loading="submiting"
      >下一步</el-button
    >
  </el-form>
</template>

<script>
import { getCaptcha, sendSmsCode } from 'services/common'
import { findPwdVerifySchool } from 'services/school/auth'
import { findPwdVerifyCompany } from 'services/company/auth'
import { findPwdVerifyStudent } from 'services/student/auth'
import { IS_DEV } from 'app/config'
import { mapState } from 'vuex'
export default {
  name: 'FindPassStep1',
  data() {
    return {
      formData: {
        companyCode: IS_DEV ? '3342' : '',
        schoolCode: IS_DEV ? '1001' : '',
        contactMobile: IS_DEV ? '18600519898' : ''
      },
      submiting: false,
      captcha: null,
      uuid: null,
      captchaImg: null
    }
  },
  computed: {
    ...mapState(['clientType']),
    rules() {
      const rules = {
        code: this.$rule('field.code', {
          required: true
        })
      }
      if (this.clientType === 'school') {
        rules.schoolCode = this.$rule('school.schoolCode', {
          required: true
        })
        rules.contactMobile = this.$rule('field.mobile', {
          required: true
        })
      } else if (this.clientType === 'company') {
        rules.companyCode = this.$rule('company.companyCode', {
          required: true
        })
        rules.contactMobile = this.$rule('field.mobile', {
          required: true
        })
      } else {
        rules.idCode = this.$rule('student.idCode', {
          required: true
        })
        rules.mobile = this.$rule('field.mobile', {
          required: true
        })
      }
      return rules
    }
  },
  methods: {
    async getCaptcha() {
      try {
        const { img, uuid } = await getCaptcha()
        this.uuid = uuid
        this.captchaImg = img
      } catch (error) {}
    },
    async sendSmsCode() {
      try {
        await sendSmsCode({
          uuid: this.uuid,
          captcha: this.captcha,
          mobile: this.formData.contactMobile
        })
      } catch (error) {}
    },
    async submitForm() {
      try {
        const valid = await this.$refs.form.validate()
        if (!valid) {
          return
        }
        this.submiting = true
        let service
        if (this.clientType === 'school') {
          service = findPwdVerifySchool
        } else if (this.clientType === 'company') {
          service = findPwdVerifyCompany
        } else {
          service = findPwdVerifyStudent
        }
        await service(this.formData)
        this.$emit('success', this.formData)
      } finally {
        this.submiting = false
      }
    }
  },
  mounted() {
    this.getCaptcha()
  }
}
</script>
